<template>
    <PageLayout title="科研列表">
        <template slot="search">
            <Checkbox v-model="createByMe" @on-change="changePageNow(1)">由我创建</Checkbox>
            <Select filterable
                clearable
                placeholder="部署状态"
                v-model="queryParams.deployStatus"
                style="width: 150px;margin-left: 15px;"
                @on-change="changePageNow(1)"
            >
                <Option value="10">未部署</Option>
                <Option value="3">部署成功</Option>
                <Option value="9">部署中</Option>
                <Option value="6">部署失败</Option>
            </Select>
            <Input
                clearable
                v-model.trim="queryParams.name"
                placeholder="科研名称"
                @on-change="debounceFn"
                style="width: 180px;margin-left: 15px;"
            />
            <Button
                class="header-btn"
                type="primary"
                ghost
                style="height: 32px;margin-left: 9px;"
                @click="refreshQueryParams()"
                ><i class="el-icon-refresh-right"
            /></Button>
        </template>
        <template slot="content">
            <div class="filter-wrap">
                <!-- <tag-select
                    title="方向"
                    :current="queryParams.direction"
                    :data="directionArr"
                    @on-change="changeDirection"
                ></tag-select>
                <Divider style="margin:15px 0px" /> -->
                <!-- showTypeArr -->
                <tag-select
                    title="类型"
                    :current="queryParams.typeCode"
                    ref="directionType"
                    :data="directionArr"
                    @on-change="changeType"
                ></tag-select>
                <Divider style="margin:15px 0px" />
            </div>
            <div class="content-table" v-show="tableData.total > 0">
                <my-card
                    v-for="(item, index) in tableData.list"
                    :key="item.id"
                    :name="item.name"
                    :imgPath="item.iconPath"
                    :width="setExperWid"
                    :height="setExperHie"
                    :style="{ 'margin-right': (index + 1) % spanNum === 0 ? '0' : '2%' }"
                    @mouseleave="mouseleave"
                    @go-detail-page="goToPage(item)"
                    class="card-item"
                >
                    <div
                        slot="status"
                        class="top-status"
                        :class="$options.filters.deployStatusFilter(item.deployStatus, 'color')"
                    >
                        {{ item.deployStatus | deployStatusFilter('text') }}
                    </div>
                    <template slot="content">
                        <div class="exper-name" :title="item.name">{{ item.name }}</div>
                        <div class="exper-info">
                            <p :title="item.inviterName">指导老师：{{ item.inviterName }}</p>
                            <p>时间：{{ item.createTime }}</p>
                            <p class="space-between">
                                <!-- <small class="exper-type" :title="item.directionName">
                                    方向：{{ item.directionName }}</small
                                > -->
                                <small class="exper-type" :title="item.typeCodeName">
                                    类型：{{ item.typeCodeName }}</small
                                >
                            </p>
                        </div>
                        <div class="oper-btn" @click.stop>
                            <Button
                                class="exper-btn"
                                :disabled="setReBtnStatus(item) || item.shareTime ? true : false"
                                @click.stop="showShareModal(item)"
                                size="small"
                                >分享</Button
                            >
                            <Poptip
                                confirm
                                title="已归档的科研删除后所有的科研成果都将被删除，确认需要删除吗？"
                                :width="200"
                                :key="`poptip-${item.id}`"
                                @on-ok="delContent(item.id)"
                            >
                                <Button
                                    class="exper-btn"
                                    :disabled="setReBtnStatus(item)"
                                    size="small"
                                    >删除</Button
                                >
                            </Poptip>
                        </div>
                    </template>
                </my-card>
            </div>
            <div
                v-show="tableData.total > 0"
                style="display: flex;justify-content: center;margin: 15px 0"
            >
                <Page
                    :total="tableData.total"
                    :page-size="queryParams.pageSize"
                    :current="queryParams.pageIndex"
                    show-total
                    show-elevator
                    @on-change="changePageNow"
                />
            </div>
            <no-data text="暂无信息" v-show="tableData.total === 0"></no-data>
        </template>
        <share-modal :currentItem="currentItem" ref="shareModal"></share-modal>
    </PageLayout>
</template>
<script>
import encryption from '@/libs/encryption.js';
import PageLayout from '@/components/common/page';
import NoData from '@/components/common/no-data';
import MyCard from '@/components/my-card';
import ShareModal from '@/view/research/filingList/share-modal';
import TagSelect from '@/components/common/tagSelect/tagSelect';
import { delContent } from '@/api/scientific/content';
import { getContentFileList } from '@/api/scientific/environment';
import { debounce } from '@/libs/utils';
import typeAndDirectionMixin from '@/mixin/typeAndDirectionMixin.js';
import { mapMutations } from 'vuex';
export default {
    name: 'List',
    components: { PageLayout, NoData, MyCard, TagSelect, ShareModal },
    mixins: [typeAndDirectionMixin],
    data() {
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        return {
            spanNum: 4,
            setExperHie: '0',
            setExperWid: 'auto',
            USER_ID: September.userId,
            isRootDesigner: September.isRootDesigner,
            createByMe: false,
            queryParams: {
                direction: 'All',
                typeCode: 'All',
                name: '',
                deployStatus: '',
                pageIndex: 1,
                pageSize: 18
            },
            tableData: {
                list: [],
                total: 0
            },
            currentItem: {}
        };
    },
    filters: {
        deployStatusFilter(val, type) {
            let str = '';
            if (type == 'text') {
                switch (val) {
                    case 0:
                        str = '未部署';
                        break;
                    case 1:
                        str = '部署中';
                        break; //同步成功
                    case 2:
                        str = '待部署';
                        break;
                    case 3:
                        str = '部署成功';
                        break;
                    case 4:
                        str = '导入失败';
                        break;
                    case 5:
                        str = '已修改';
                        break;
                    case 6:
                        str = '部署失败';
                        break;
                    case 7:
                        str = '修改错误';
                        break;
                    case 8:
                        str = '删除失败';
                        break;
                    case 9:
                        str = '部署中 ';
                        break;
                    case 10:
                        str = '未部署';
                        break;
                    case 11:
                        str = '修改失败';
                        break;
                    case 12:
                        str = '待删除';
                        break;
                    case 13:
                        str = '清空部署中';
                        break;
                    case 14:
                        str = '清空部署失败';
                        break;
                    case 15:
                        str = '部署校验中';
                        break;
                    case 16:
                        str = '工程导入中';
                        break;
                    case 17:
                        str = '工程导入失败';
                        break;
                    default:
                        break;
                }
            } else {
                switch (val) {
                    case 0:
                        str = 'notBegin';
                        break;
                    case 1:
                        str = 'beginning';
                        break;
                    case 3:
                        str = 'beginning';
                        break;
                    case 4:
                        str = 'finish';
                        break;
                    case 6:
                        str = 'finish';
                        break;
                    case 7:
                        str = 'finish';
                        break;
                    case 8:
                        str = 'finish';
                        break;
                    case 11:
                        str = 'finish';
                        break;
                    case 14:
                        str = 'finish';
                        break;
                    case 10:
                        str = 'notBegin';
                        break;
                    case 17:
                        str = 'finish';
                        break;
                    default:
                        str = 'notBegin';
                        break;
                }
            }
            return str;
        }
    },
    mounted() {
        this.setStyle();
        this.getListData();
        window.addEventListener('resize', this.setStyle);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setStyle);
    },
    methods: {
        // 鼠标移开时，强制点击body，使Poptip组件消失
        mouseleave() {
            document.body.click();
        },
        // 修改方向
        changeDirection(item) {
            this.queryParams.direction = item;
            this.queryParams.typeCode = 'All';
            this.filterTypeWithDirection(item);
            this.$refs.directionType && this.$refs.directionType.updateHeight();
            this.changePageNow(1);
        },
        // 修改类型
        changeType(item) {
            this.queryParams.typeCode = item;
            this.changePageNow(1);
        },
        // 动态计算卡片宽高
        setStyle() {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            //this.contentHei = this.fullHeight - 60 + 'px' // 80是头部高度  60是上下padding
            this.contentWid = this.fullWidth - 200 - 100; // 200是菜单栏宽度  100是左右padding
            if (this.fullWidth <= 860) {
                this.spanNum = 2;
                this.queryParams.pageSize = 6;
            }
            if (this.fullWidth <= 1680 && this.fullWidth > 860) {
                this.spanNum = 3;
                this.queryParams.pageSize = 6;
            }
            if (this.fullWidth > 1680 && this.fullWidth <= 2080) {
                this.spanNum = 4;
                this.queryParams.pageSize = 16;
            }
            if (this.fullWidth > 2080) {
                this.spanNum = 5;
                this.queryParams.pageSize = 20;
            }
            let experWid = (100 - 2 * (this.spanNum - 1)) / this.spanNum;
            this.setExperWid = experWid + '%';
            this.setExperHie = this.contentWid * (experWid / 100) * 0.65 + 'px';
            this.debounceFn();
        },
        // 跳转到详情页
        goToPage(item) {
            this.$router.push({
                name: 'researchDetail',
                query: {
                    id: item.id
                }
            });
        },
        // 显示分享模态框
        showShareModal(item) {
            this.currentItem = item;
            this.$refs.shareModal.show();
        },
        // 删除科研项目
        delContent(id) {
            delContent(id).then(({ code, message }) => {
                if (code !== 1) {
                    this.$Message.warning(message);
                    return;
                }
                // 删除后展示当前页，当前页没有数据展示前一页
                this.queryParams.pageIndex =
                    this.tableData.list.length == 1 && this.queryParams.pageIndex > 1
                        ? this.queryParams.pageIndex - 1
                        : this.queryParams.pageIndex;
                this.$Message.success('删除成功');
                this.refreshQueryParams();
            });
        },
        // 判断按钮是否可点
        setReBtnStatus(params) {
            let userid = params.creator;
            return !(userid === this.USER_ID || this.isRootDesigner);
        },
        // 重置搜索条件并查询数据
        refreshQueryParams() {
            // pageSize 特意不重置，以浏览器大小确认获取量
            this.queryParams.direction = 'All';
            this.queryParams.typeCode = 'All';
            this.queryParams.name = '';
            this.queryParams.deployStatus = '';
            this.queryParams.pageIndex = 1;
            this.createByMe = false;
            this.getListData();
        },
        // 防抖方法，用于输入型查询
        debounceFn: debounce(function() {
            this.changePageNow(1);
        }),
        // 查询指定页数据
        changePageNow(val) {
            this.queryParams.pageIndex = val;
            this.getListData();
        },
        // 查询科研列表
        getListData() {
            let params = Object.assign({}, this.queryParams);
            params.creator = this.createByMe ? this.USER_ID : '';
            if (params.typeCode === 'All' && params.direction !== 'All') {
                params.typeCode = params.direction;
            } else if (params.typeCode === 'All' && params.direction === 'All') {
                params.typeCode = '';
            }
            delete params.direction; // 这个字段对接口没有意义，只是控制页面展示
            getContentFileList(params).then(({ code, message, data = {} }) => {
                if (code !== 1) {
                    this.$Message.warning(message);
                    return;
                }
                this.tableData.list = data.items.map((item) => {
                    item.typeCodeName = this.handleCodeType(item.typeCode);
                    // item.directionName = this.handleDirection(item.typeCode);
                    return item;
                });
                this.tableData.total = data.total;
            });
        }
    }
};
</script>
<style scoped>
.space-between {
    display: flex;
    justify-content: space-between;
}

.exper-type {
    display: inline-block;
    width: calc(50% - 6px);
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.content-table {
    display: flex;
    flex-wrap: wrap;
}
.card-item {
    margin-bottom: 20px;
}
.exper-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    word-break: normal;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 16px;
    width: 100%;
}
.exper-info {
    color: #8d95a6;
}

.exper-info p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.oper-btn {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.exper-btn {
    border-color: #8d95a6;
    color: #8d95a6;
}

.notBegin {
    color: #000;
    background: #ffffff;
}

.beginning {
    color: #fff;
    background: #2ccb71;
}

.finish {
    color: #fff;
    background: #db0101;
}

.top-status {
    position: absolute;
    border: 1px solid #ccc;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 15px;
    top: 10%;
    right: 15px;
    z-index: 1;
}
</style>
